<template>
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <!-- 轮播图 -->
    <van-swipe :autoplay="2500" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width: 100%;" />
        </van-swipe-item>
    </van-swipe>

    <!-- 分类grid宫格实现 -->
    <van-grid :column-num="5" square :gutter="5">
        <van-grid-item v-for="list in menulist" :key="list">
            <van-image :src="list.url" style="width: 50%;" />
            <span style="font-size: 12px;">{{ list.text }}</span>
        </van-grid-item>
    </van-grid>

    <!-- 商品展示 -->
    <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="item in productList" :key="item.id" class="gridItem">
            <van-image :src="item.pic" style="width: 100%;padding: 0;" />
            <h4
                style="font-size: 14px; position: absolute; left: 2px;top: 5px; background-color: red; color: #fff; border-radius: 10%;">
                {{ item.name }}
            </h4>
        </van-grid-item>
    </van-grid>

    <!-- 每周上新 -->
    <div class="newList">
        <h3>每周上新</h3>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in newList" :key="item.id">
                <van-image :src="item.newPic" style="width: 105%;" />
                <p>{{ item.name }}</p>
                <p><span>￥</span>{{ item.newPrice }}</p>
            </van-grid-item>
        </van-grid>
    </div>

    <!-- 人气推荐 -->
    <div class="proCard">
        <h3>人气推荐</h3>
        <van-card v-for="item in cardList" :key="item.id" :tag="item.tag" :price="item.new_price"
            :origin-price="item.origin_price" :desc="item.information" :title="item.name" :thumb="item.card_pic">
        </van-card>
        <!-- desc描述信息，ori-pri原价，tag标签，thumb图片路径 -->
    </div>

</template>

<script setup>
//banner
import { ref } from 'vue'
const value = ''
const images = [
    'src/images/banner1.jpg',
    'src/images/banner2.jpg',
];

//sort
import menu1 from '../icons/menu1.png'
import menu2 from '../icons/menu2.png'
import menu3 from '../icons/menu3.png'
import menu4 from '../icons/menu4.png'
import menu5 from '../icons/menu5.png'
import menu6 from '../icons/menu6.png'
import menu7 from '../icons/menu7.png'
import menu8 from '../icons/menu8.png'
import menu9 from '../icons/menu9.png'
import menu10 from '../icons/menu10.png'

const menulist = [
    { text: '今日爆款', url: menu1 },
    { text: '好物分享', url: menu2 },
    { text: '推荐购买', url: menu3 },
    { text: '购物心得', url: menu4 },
    { text: '直播专区', url: menu5 },
    { text: '签到中心', url: menu6 },
    { text: '值得购买', url: menu7 },
    { text: '每日优惠', url: menu8 },
    { text: '充值中心', url: menu9 },
    { text: '我的客服', url: menu10 }
];

//product-show
const productList = [
    { id: 1, name: '直播', pic: 'src/images/product1.png' },
    { id: 2, name: '推荐', pic: 'src/images/product2.png' },
    { id: 3, name: '补贴', pic: 'src/images/product3.png' },
    { id: 4, name: '分享', pic: 'src/images/product4.png' }
];

//newList-show
const newList = [
    { name: '懒人小沙发', newPic: 'src/images/new1.jpg', newPrice: '128.00' },
    { name: '减压弹力球', newPic: 'src/images/new2.jpg', newPrice: '89.00' },
    { name: '简约一字夹发卡', newPic: 'src/images/new3.jpg', newPrice: '12.8' },
    { name: '毛线小兔子耳朵发卡', newPic: 'src/images/new4.jpg', newPrice: '9.9' }
]

//recommend-card
const cardList = [
    { tag: 'Top1', new_price: '299.00', origin_price: '', information: '一级桑蚕丝，轻盈、透气、柔软', name: '蚕丝被 正品桑蚕丝', card_pic: 'src/images/top1.jpg'},
    { tag: 'Top2', new_price: '88.00', origin_price: '98.00', information: '安全、不会侧翻、爸妈放心', name: '儿童摇摇马', card_pic: 'src/images/top2.jpg'},
    { tag: 'Top3', new_price: '128.00', origin_price: '168.00', information: '轻松看书、社交、办公、舒适放松', name: '可躺可睡休闲懒人沙发', card_pic: 'src/images/top3.jpg'},
    { tag: 'Top4', new_price: '199.00', origin_price: '205.00', information: '大颗粒 家长更放心 不易吞咽、安全...', name: '儿童积木 拼装玩具', card_pic: 'src/images/top4.jpg'},
    { tag: 'Top5', new_price: '80.00', origin_price: '75.00', information: '坚固车身、车体内置加强承重', name: '儿童摇摇车', card_pic: 'src/images/top5.jpg'}
]

</script>



<style scoped>
.gridItem :deep(.van-grid-item__content) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* .van-grid-item__content {
    padding-left: 0 !important;
    padding-right: 0 !important;

} */

.newList>h3 {
    width: 50%;
    border-top: 2px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    text-align: center;
}

.newList .p {
    text-align: center;
}

.newList span {
    color: #FF8000;
    font-size: 12px;
}

.proCard > h3 {
    width: 50%;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    text-align: center;
}

/* vant样式，参考vant */
.proCard {
--van-tag-primary-color: #FF8000;
--van-card-font-size: 14px;
--van-card-background: #f9f9f9;
}
</style>
